vue3.0 + ts 引入详细步骤及语法校验报错解决办法

2024-07-01 02:25| 来源: 网络整理| 查看: 265

一、前言

前段时间学习了ts，于是用脚手架搭了个vue3.0+ts的项目，引入详细步骤及语法校验报错解决办法，整理下遇到的问题以及解决办法，分享给大家。

二、使用 1. 引入ts

Q: 在vue项目中编写tsx函数式组件提示报错。在没有引入ts的项目中，写tsx语法提示报错。无法使用 JSX，除非提供了 “–jsx” 标志。ts(17004) 在这里插入图片描述 A:

先检查是否安装ts，cmd输入 tsc -v，显示了版本号即安装了ts；未安装则执行 npm install -g typescript，全局安装ts；下载依赖包 yarn add typescript @vue/cli-plugin-typescript；添加tsconfig.json配置文件。在项目目录下控制台输入tsc --init，该目录下生成tsconfig.json文件，内容替换成以下： { "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/main.js"], "exclude": ["node_modules"], "compilerOptions": { "jsx": "preserve", "noImplicitAny": false, "allowJs": true, "target": "es2016", "module": "commonjs", "baseUrl": "./", "paths": { "@/*": ["./src/*"] }, "types": ["webpack-env"], "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "strict": true, "skipLibCheck": true }, } jsconfig.json 文件添加 “jsx”: “preserve” 配置项。

R: 问题解决视图在这里插入图片描述

2 main.js 修改成 main.ts

Q: 控制台报错 Can’t resolve ‘./src/main.js’ in ‘F:\code\st\Vue\v3_ts’ 在这里插入图片描述 A：停止运行后重新运行npm run serve 即可 R：运行成功

3. 修改app.vue 后缀为 .tsx, 修改文件内容 import { defineComponent } from 'vue' export default defineComponent({ setup() { return () => ( ) } }) 4. 组件引入less 使用import导入的方式引入，代码如下： import "./index.less" export default (props, ctx) => { return () => ( 123 ) } 5. 组件引入图片

使用import导入的方式引入，代码如下：在这里插入图片描述 Q：报错找不到模块“./img/right.png”或其相应的类型声明。 A：在src目录下新增文件 shims.d.ts 文件，内容如下：

declare module '*.vue' { import { ComponentOptions } from 'vue' const componentOptions: ComponentOptions export default componentOptions } declare module '*.less'; declare module '*.png'; declare module '*.json'; 三、报错类型及解决办法

Q：eslint 校验报错。 A： vue.config.js 中添加 lintOnSave:false 配置项，重新运行即可。在这里插入图片描述

Q：引入 less 报错。在这里插入图片描述 A：未下载less依赖包，yarn add less less-loader即可。

Q：使用navigator.getUserMedia 提示报错类型“Navigator”上不存在属性“getUserMedia”；在这里插入图片描述 A：在src目录下 shims.d.ts 文件中添加如下内容即可。

interface Navigator { getUserMedia( constraints: MediaStreamConstraints, successCallback: NavigatorUserMediaSuccessCallback, errorCallback: NavigatorUserMediaErrorCallback ): Promise; } declare const navigator: Navigator; Q：使用dom获取页面元素，修改属性值时报错。不能将类型“HTMLElement | null”分配给类型“HTMLVideoElement”。不能将类型“null”分配给类型“HTMLVideoElement”。在这里插入图片描述

A：使用断言，把获取到的dom元素设置成 HTMLVideoElement 类型，代码如下： videoEle = document.getElementById("video") as HTMLVideoElement; videoEle.srcObject = stream; videoEle.onloadedmetadata = function (e) { videoEle.play(); };

暂时遇到了这些，后续遇到其他语法报错的问题再更新。

Q：父组件传子组件非必传参数，在子组件中使用报错。类型“string | undefined”的参数不能赋给类型“string”的参数。不能将类型“undefined”分配给类型“string”。在这里插入图片描述

A：使用断言，设置成对应类型，如 let placeholder = ref(props?.placeholder as string) Q：引入第三方js，报错找不到名称“XLSX”。在这里插入图片描述

A：在src目录下 shims.d.ts 文件中添加如下内容即可。 declare const XLSX: any; Q 使用父组件传入的属性报错，property) s: string | undefined，对象可能为“未定义”。ts(2532) 在这里插入图片描述

A：使用 let str = props.s as string; 变量接收属性值后断言成对应类型的数据类型 import { defineComponent } from "vue"; import VP from "./components/poker" interface Props { s?: string } export default defineComponent({ props: { s: { type: String } }, setup(props: Props, ctx) { let str = props.s as string; return () => ( { str.split("").map(v => { return () }) } ) } })

【本文地址】

公司简介

联系我们